import { newBigeMap } from "./map.js"
import { editorMap } from "./rightEditorMap.js"
class leftMapSuper{
	constructor() {
	    this.BM
		this.map
		this.VM
		// 地图绘画工具实例化对象
		this.mapDraws = ''
		// 地图绘画图形初始化样式
		this.coverageOps = {
			shapeOptions: {
				color: '#FF0000',
				fillColor: '#FF0000',
				weight: 2,
				dashArray: 0
			},
			// 是否循环绘画
			repeatMode: true
		}
		// 当前选中的层级列表
		this.hierarchy =  'h1'
		this.pName = '我的图层'
		// 当前的绘画工具对象
		this.mapEditorType = ''
	}
	// 初始化绘画
	init(vue, BM, map){
		return new Promise((reslove, reject) => {
			this.VM = vue
			// 获取组件地图对象数据
			newBigeMap.getMapObjData().then(res=>{
				// 初始化绘画功能
				this.BM = res.BM
				this.map = res.map
				this.hierarchy =  this.VM.variety.varietyId!==''?'h3':'h1'
				if(this.BM && this.map){
					// 实例化组件编辑功能
					this.mapDraws = {
						marker: new this.BM.Draw.Marker(this.map, this.coverageOps),
						polyline: new this.BM.Draw.Polyline(this.map, this.coverageOps),
						polygon: new this.BM.Draw.Polygon(this.map, this.coverageOps),
						circle: new this.BM.Draw.Circle(this.map, this.coverageOps),
						rectangle: new this.BM.Draw.Rectangle(this.map, this.coverageOps),
						// measure: new this.BM.Draw.Polygon(this.map, this.coverageOps),
						ruler: this.BM.control.measure({lineColor: 'red',}).addTo(this.map)
					}
					this.openEditorFunc()
				}
				reslove(true)
			})
		})
	}
	// 设置当前选中的层级ID
	setHierarchy(id, name){
		this.hierarchy = id
		this.pName = name
	}
	// 创建一个图形覆盖物的集合来保存点线面
	openEditorFunc(){
		//创建一个图形覆盖物的集合来保存点线面
		const drawnItems = new this.BM.FeatureGroup();
		//添加在地图上
		this.map.addLayer(drawnItems);
		// 启用绘画完成监听事件
		this.drawingFunc(drawnItems)
	}
	// 监听绘画完成事件
	drawingFunc(drawnItems){
		let that = this
		this.map.on(this.BM.Draw.Event.CREATED, function (e) {
			// 获取当前完成编辑的对象
			let type = e.layerType,
				layer = e.layer;
			
			// 自定义图层数据
			let custom = {
				id: `${type}${new Date().getTime()}`,
				pId: that.hierarchy,
				type: type,
				area: '0',
				content: '', // 面积
				markerIcon: 'http://59.110.54.18:8080/file/icon/blu-circle.png',
				length: '', // 线段的长
				unit: '', // 计算单位
				latLng: '', // 经纬度
				radiusUnit: '',//半径单位
				radius: '', // 半径
				title: `${type}#${newBigeMap.customData.size}`,
				options: '',
				isShow: true,
				isLocation: false,
				pName: that.pName,
				variety: that.VM.variety?that.VM.variety.varietyId:'',// 品种
				customVariety: '' ,// 自定义品种
				varietyIndex: that.VM.variety?that.VM.variety.varietyIndex:'',
				centralPoint: '',// 图层中心点
				perimeter: '' ,// 图层周长
				isShowArea: true // 是否显示面积
				
			}
			// 为自定义添加的图层绑定类型和ID
			layer.type = type
			layer.id = custom.id
			layer.isShowArea = custom.isShowArea
			// layer.isLocation = false
			if (type === 'marker'){
				// 设置标注的图标
				let myIcon = BM.icon({
				    iconUrl: custom.markerIcon,
				    iconSize: [32, 32],
				});
				layer.setIcon(myIcon)
				// 设置标注的工具提示
				layer.bindTooltip(custom.title, {direction:'bottom',permanent:true,className:'my_tooltip'})
				// 标注,获得当前编辑对象的坐标值
				
				// console.log(layer.options.alt = custom.title)
				custom.latLng = layer.getLatLng()
			} else if (type === 'polygon' || type === 'rectangle') {
				// 如果是矩形或者多边形，拿到坐标的方式不一样
				let style = {
					fill: true
				}
				layer.setStyle(style)
				let latLngs = layer.getLatLngs()[0]
				custom.latLng = latLngs
				// 计算面积
				let areas = newBigeMap.calculateArea(latLngs, layer)
				// 周长
				custom.perimeter = newBigeMap.calculationPerimeter(latLngs, layer)
				// console.log(newBigeMap.calculationPerimeter(latLngs, layer))
				// layer.bindTooltip('面积:' + areas + 'k㎡', {permanent:true})
				custom.area = areas
				custom.unit = '㎡'
			} else if (type === 'polyline') {
				// 如果是线段
				let style = {
					fill: false
				}
				layer.setStyle(style)
				let latLngs = layer.getLatLngs()
				custom.latLng = latLngs
				// 计算距离
				let distance = newBigeMap.calculationDistance(latLngs, layer)
				// layer.bindTooltip('长:' + distance + 'km', {permanent:true})
				custom.length = distance
				custom.unit = 'm'
			} else if (type === 'circle') {
				// 如果是圆
				let style = {
					fill: true
				}
				layer.setStyle(style)
				let latLngs = layer.getLatLng()
				let circleareas = newBigeMap.circleArea(latLngs, layer)
				custom.area = circleareas.data
				custom.unit = '㎡'
				custom.radius = circleareas.R
				custom.perimeter = circleareas.perimeter
				custom.radiusUnit = 'm'
				custom.latLng = latLngs
				
			}
			// if(type !== 'marker'){
				drawnItems.addLayer(layer);
				// console.log(layer.getBounds())
				// 设置层中心点
				if(type === 'marker'){
					custom.centralPoint = layer.getLatLng()
				} else if(type === 'circle') {
					custom.centralPoint = layer.getLatLng()
				} else {
					custom.centralPoint = layer.getCenter()
				}
				// console.log(custom.centralPoint)
			// }
			// 拿到当前对象的属性值
			custom.options = layer.options
			// 向map集合添加已完成的数据
			newBigeMap.customData.set(custom.id, custom)
			// console.log(newBigeMap.customData)
			newBigeMap.mapDataLarey.set(custom.id, layer)
			// 添加图层元素的点击事件
			editorMap.bindMapClick(layer, that.map)
			// 绘画完成之后，向页面发送数据
			that.sendToPageMapData(custom)
			// 设置地图状态为经过编辑的状态
			newBigeMap.isMapEditor = true
		})
	}
	// 绘画完成之后，向页面发送数据
	sendToPageMapData(custom){
		// const data = [...this.customData.values()]
		this.VM.getFromJsData(custom)
	}
	// 地图绘画事件
	mapDrawing(type){
		// 检测当前是否存在已有编辑对象
		editorMap.detectionClick().then(()=>{
			if(this.mapEditorType){
				// 当点击绘画工具时,关闭前一个绘画工具
				this.mapDraws[this.mapEditorType].disable()
			}
			let draw;
			if(type=='ruler'){
				$('.bigemap-control-measure')[0].click()
			} else if(!draw && type){
				this.mapEditorType = type
				draw = this.mapDraws[type]
				draw.enable();
			}
		})
	}
	
}
export const leftMap = new leftMapSuper()